{extend name="index_layout"/}
{block name="main"}
<form class="layui-form" method="post" enctype="multipart/form-data">
    <input type="hidden" id="id" name="id" class="id" value="{$data.id}">
    <input type="hidden" id="url_size" name="url_size" class="url_size" value="">

    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" value="{$data.name}" autocomplete="off" placeholder="名称"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">视频：</label>
        <div class="layui-upload layui-input-block">
            <button type="button" name="video_upload" class="layui-btn btn_upload_video">
                <i class="layui-icon">&#xe652;</i>上传视频
            </button>
            <button type="button" name="del_video" id="myButton" class="layui-btn layui-btn-danger">
               删除视频
            </button>
            <br><br>
            <div class="layui-progress layui-progress-big"  width="600px" lay-showpercent="true" lay-filter="progressBar">
                <div id="progressBar" pb_loading_tag="1" class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
            </div>
            <br>
            <video name="c2" class="video-upload-view" width="400px" src="{$data.video_url}" controls="controls" ></video>
            <input type="" name="video_url" class="save_url" value="{$data.video_url}">
        </div>
    </div>
    <div class="layui-form-item layer-footer">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
{/block}
{block name="script"}
<script type="text/javascript">
    layui.use('yznForm', function () {
        var yznForm = layui.yznForm;
        yznForm.bindevent($("form.layui-form"));
    });

    layui.use(['layer','upload','element'], function () {
        var upload = layui.upload;
        var element = layui.element;
        var loading_count = 0;
        upload.render({
            elem: '.btn_upload_video'
            ,exts: 'mp4|flv' //设置一些后缀，用于演示前端验证和后端的验证
            ,url: '/upload_fileOss' //改成您自己的上传接口
            ,accept: 'video' //视频
            , before: function (obj) {
                loading_count = 0;
                $("#progressBar").attr('pb_loading_tag',1);
                element.progress('progressBar', '0%');
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('.video-upload-view').attr('src', result); //图片链接（base64）
                    $('.video-upload-view').show();
                });
            },
            progress: function() {
                //模拟loading
                var timer = setInterval(function(){
                    var loading = $("#progressBar").attr('pb_loading_tag');
                    if(loading == 1){
                        loading_count = loading_count + Math.random()*10|1;
                        if(loading_count>98){
                            loading_count = 98;
                        }
                    }else {
                        loading_count = 100;
                        clearInterval(timer);
                    }
                    //这里是虚拟的哦，其实就是为了能提示一下没上传完就可以了，哈哈...
                    element.progress('progressBar', loading_count+'%');
                }, 300+Math.random()*1000);
            }
            ,done: function(res){
                //如果上传成功
                if (res.status == 1) {
                    $('.save_url').val(res.data.url);
                    $("#progressBar").attr('pb_loading_tag',0);
                    $(".url_size").val(res.data.size);
                }
                layer.msg(res.message);
            }
        });
    });
</script>
<script>
    document.getElementById('myButton').addEventListener('click', function() {
        document.querySelector('.save_url').value = '';
        document.querySelector('.video-upload-view').src = '';
    });
</script>
{/block}